<script setup lang="ts">
import ConfigSection from './shared/ConfigSection.vue';
import { guideInfo } from '@/app/guideInfo';

const showGuideInfos = guideInfo.findHelp || guideInfo.extra
</script>

<template>
<ConfigSection :title="'常见问题'" :special="true">
<div class="faqs">
    <div>
        <h3>操作不习惯</h3>
        <div>
            <p>如果觉得操作不习惯，这是由于您已经习惯了其他软件完全不同的操作，请保持耐心尝试完成您的第一个作品，您不会失望的。</p>
            <p>本工具的设计核心理念为上手简单，且可以<b>极为快速</b>地创建庞大复杂的线路图。</p>
            <p><b>铁证如山：</b>首页“最近更新”里，时常能看到的巨型线路图，即为“快速”最好的证明。如果难以操作，不会有如此多的用户有毅力创建这么巨大的线路图。</p>
            <p>本工具为纯原创项目，没有借鉴任何其他的软件，设计上如有雷同纯属巧合。</p>
        </div>
    </div>
    <div>
        <h3>无法使用</h3>
        <div>
            <p><b>有目共睹：</b>本项目在正规浏览器上能正常运行</p>
            <p>如果遇到白屏/拖动不动等完全无法使用的问题，请更换正规浏览器，例如Chrome、Edge、Safari、Firefox（若系统过旧，更换浏览器也不一定有用）</p>
        </div>
    </div>
    <div>
        <h3>收费</h3>
        <div>
            <p>本项目永远不会以任何理由收费，现有以及未来更新的所有功能（包括云服务）全部开源免费。</p>
            <p>这是由于：作者制作本项目仅仅是爱慕虚荣，而非为了生计。</p>
            <p>你可以在“关于”页找到本项目全部源代码并自己修改或私下使用。</p>
        </div>
    </div>
    <div>
        <h3>本项目是“自由软件”</h3>
        <div>
            <p>你对本项目拥有以下四条“软件自由”：</p>
            <p>1. 出于任何目的，运行程序的自由</p>
            <p>2. 研究程序如何工作，并使其适应你的需求的自由</p>
            <p>3. 重新分发副本的自由，以便你能够帮助他人</p>
            <p>4. 改进程序，并将你的改进公开发布的自由</p>
            <p>要查看完整条款，详见源代码根目录的许可证文件</p>
        </div>
    </div>
    <div>
        <h3>站点的坐标</h3>
        <div>
            <p>可右键点击站名，或点击车站后进入其设置菜单，输入坐标。</p>
            <p>不建议直接控制站点的坐标，使用本工具的三种自动吸附，足以快速创建规整的线路图。</p>
            <p>输入坐标是费时费力的操作，除非迫不得已，请不要在这件事上浪费您宝贵的时间。</p>
        </div>
    </div>
    <div>
        <h3>并行换乘站</h3>
        <div>
            <p>如果需要创建上海3/4那样的区间。</p>
            <p>将一个站点靠近另一个，站点四周会出现绿色的吸附点，将站“拼上去”即可形成并行换乘站。</p>
            <p>这种换乘站在本工具内被称为“车站团”，如果对其形状感到困惑，请查看“车站团的形状”。</p>
        </div>
    </div>
    <div>
        <h3>车站团的形状</h3>
        <div>
            <p>当几个车站互相靠近吸附时，就会形成一个车站团覆盖它们。</p>
            <p>车站团必然是矩形，但可能是“正的”或“斜的”。</p>
            <p>当车站团内所有站朝向一致时，会使用该朝向。</p>
            <p>当车站团内并不朝向一致时，会使用正/斜中“面积最小的画法”。</p>
            <p>如果希望巨型车站结构更清晰，请<b>拆分为多个</b>车站团，并使用车站连线连接。</p>
        </div>
    </div>
    <div>
        <h3>控制线路走向</h3>
        <div>
            <p>请点击首页的紫色“查看使用说明”链接，并跟随里面的引导。</p>
        </div>
    </div>
    <div>
        <h3>鼠标快捷操作</h3>
        <div>
            <p>右键点击车站，将其旋转。</p>
            <p>ctrl+右键点击车站，切换是否显示。</p>
            <p>右键站名/文本标签，快速打开侧栏。</p>
        </div>
    </div>
    <div>
        <h3>无法对齐网格</h3>
        <div>
            <p>这是较为罕见的情况。</p>
            <p>“对齐线路上相邻车站”比“对齐网格”的优先级更高，若隔壁的控制点略微偏离网格，则当前点也无法对齐网格。</p>
            <p>解决办法：先将隔壁点拖动到偏离线路，再拖动当前点就可以对齐网格，最后恢复隔壁点的位置。</p>
        </div>
    </div>
    <div>
        <h3>拉远时站名变成方块</h3>
        <div>
            <p>请进入“设置-编辑器”，查看“站名糊弄机制”。</p>
            <p>在站名较多时，这将显著提高性能，建议设为“宽松”。</p>
        </div>
    </div>
    <div>
        <h3>背景图/图标的链接</h3>
        <div>
            <p>请把图片上传到“资源库”，点击“⛓️”图标复制其链接，粘贴到对应位置。</p>
        </div>
    </div>
    <div>
        <h3>缩放时背景图尺寸不固定</h3>
        <div>
            <p>请在背景图链接下方的输入框中设置其宽或高。</p>
        </div>
    </div>
    <div>
        <h3>获取备份</h3>
        <div>
            <p>若出现误操作/他人破坏/恶性bug导致进度大量丢失，可联系服主获取备份（两次保存操作间隔20分钟以上就会生成备份，最多15份）。</p>
            <p>建议定期进行“我的存档-信息设置-导出工程文件”，保存存档到自己的设备上。</p>
        </div>
    </div>
    <div>
        <h3>避免卡顿</h3>
        <div>
            <p>你应该：干净利落地移动/缩放视角，并在两次移动/缩放间留出稍长的空隙。</p>
            <p>卡顿是由于js的单线程性质造成的，无法根治，但如果操作者能与工具紧密配合，就能避免发生卡顿。</p>
            <p>本绘图器会在你做出任何操作（包括编辑/缩放视角/移动视角）并停止的约0.1秒后进行重新渲染。</p>
            <p>根据画布内容的多少，重新渲染可能耗时0.01~0.15秒左右。</p>
            <p>如果这时候，你正好试图进行视角移动，就会发生卡顿。</p>
            <p>反之，如果你等待约0.1~0.25秒（可以注意到画布被重新填满屏幕/变清晰）后，再次进行操作，即可避免与重新渲染事件“撞上”。</p>
        </div>
    </div>
    <div v-if="showGuideInfos">
        <h3>更多问题：可问其他用户</h3>
        <div>
            <p>{{ guideInfo.findHelp }}</p>
            <p>{{ guideInfo.extra }}</p>
        </div>
    </div>
</div>
</ConfigSection>
</template>

<style lang="scss" scoped>
.faqs{
    display: flex;
    flex-direction: column;
    gap: 10px;
    &>div{
        background-color: #eee;
        padding: 5px;
        border-radius: 5px;
    }
}
h3{
    margin-bottom: 8px;
}
p{
    margin-bottom: 5px;
    font-size: 14px;
    text-indent: 2em;
}
a{
    text-decoration: underline;
}
</style>